<!DOCTYPE html>
<html lang=zh>
<head>
  <meta charset="utf-8">
  
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-transform" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no,email=no,adress=no">
  <!-- Color theme for statusbar -->
  <meta name="theme-color" content="#000000" />
  <!-- 强制页面在当前窗口以独立页面显示,防止别人在框架里调用页面 -->
  <meta http-equiv="window-target" content="_top" />
  
  
  <title>工作功能归纳.md | 雨落</title>
  <meta name="description" content="1、vue 项目使用 html2canvas 生成截图并转为 base 64 格式 安装：yarn add htmlcanvas  12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717">
<meta property="og:type" content="article">
<meta property="og:title" content="工作功能归纳.md">
<meta property="og:url" content="https://gitee.com/Yu-Luoboke/2021/10/23/%E5%B7%A5%E4%BD%9C%E5%8A%9F%E8%83%BD%E5%BD%92%E7%BA%B3-md/index.html">
<meta property="og:site_name" content="雨落">
<meta property="og:description" content="1、vue 项目使用 html2canvas 生成截图并转为 base 64 格式 安装：yarn add htmlcanvas  12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2021-10-23T08:59:17.000Z">
<meta property="article:modified_time" content="2022-07-29T06:20:50.236Z">
<meta property="article:author" content="lianghongming">
<meta name="twitter:card" content="summary">
  <!-- Canonical links -->
  <link rel="canonical" href="https://gitee.com/Yu-Luoboke/2021/10/23/%E5%B7%A5%E4%BD%9C%E5%8A%9F%E8%83%BD%E5%BD%92%E7%BA%B3-md/index.html">
  
    <link rel="alternate" href="/atom.xml" title="雨落" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png" type="image/x-icon">
  
  
<link rel="stylesheet" href="/blog/css/style.css">

  
  
  
  
<meta name="generator" content="Hexo 5.2.0"></head>


<body class="main-center" itemscope itemtype="http://schema.org/WebPage">
  <header class="header" itemscope itemtype="http://schema.org/WPHeader">
  <div class="slimContent">
    <div class="navbar-header">
      
      
      <div class="profile-block text-center">
        <a id="avatar" href="http://yu-luoboke.gitee.io/blog" target="_blank">
          <img class="img-circle img-rotate" src="/blog/images/avatar.jpg" width="200" height="200">
        </a>
        <h2 id="name" class="hidden-xs hidden-sm">雨落</h2>
        <h3 id="title" class="hidden-xs hidden-sm hidden-md">前端开发-奋斗青年</h3>
        <small id="location" class="text-muted hidden-xs hidden-sm"><i class="icon icon-map-marker"></i> GuangZhou, China</small>
      </div>
      
      <div class="search" id="search-form-wrap">

    <form class="search-form sidebar-form">
        <div class="input-group">
            <input type="text" class="search-form-input form-control" placeholder="搜索" />
            <span class="input-group-btn">
                <button type="submit" class="search-form-submit btn btn-flat" onclick="return false;"><i class="icon icon-search"></i></button>
            </span>
        </div>
    </form>
    <div class="ins-search">
  <div class="ins-search-mask"></div>
  <div class="ins-search-container">
    <div class="ins-input-wrapper">
      <input type="text" class="ins-search-input" placeholder="想要查找什么..." x-webkit-speech />
      <button type="button" class="close ins-close ins-selectable" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
    </div>
    <div class="ins-section-wrapper">
      <div class="ins-section-container"></div>
    </div>
  </div>
</div>


</div>
      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <nav id="main-navbar" class="collapse navbar-collapse" itemscope itemtype="http://schema.org/SiteNavigationElement" role="navigation">
      <ul class="nav navbar-nav main-nav menu-highlight">
        
        
        <li class="menu-item menu-item-home">
          <a href="/blog/.">
            
            <i class="icon icon-home-fill"></i>
            
            <span class="menu-title">首页</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-archives">
          <a href="/blog/archives">
            
            <i class="icon icon-archives-fill"></i>
            
            <span class="menu-title">归档</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-categories">
          <a href="/blog/categories">
            
            <i class="icon icon-folder"></i>
            
            <span class="menu-title">分类</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-tags">
          <a href="/blog/tags">
            
            <i class="icon icon-tags"></i>
            
            <span class="menu-title">标签</span>
          </a>
        </li>
        
      </ul>
      
	
    <ul class="social-links">
    	
        <li><a href="http://yu-luoboke.gitee.io/blog" target="_blank" title="Github" ><i class="icon icon-github"></i></a></li>
        
    </ul>

    </nav>
  </div>
</header>

  
    <aside class="sidebar" itemscope itemtype="http://schema.org/WPSideBar">
  <div class="slimContent">
    
      <div class="widget">
    <h3 class="widget-title">公告</h3>
    <div class="widget-body">
        <div id="board">
            <div class="content">
                <p>欢迎交流与分享经验!</p>
            </div>
        </div>
    </div>
</div>

    
      
  <div class="widget">
    <h3 class="widget-title">分类</h3>
    <div class="widget-body">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/blog/categories/Git/">Git</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/HTML-CSS/">HTML + CSS</a><span class="category-list-count">7</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/JVM%EF%BC%88Java%E8%99%9A%E6%8B%9F%E6%9C%BA%EF%BC%89-%E5%9E%83%E5%9C%BE%E5%9B%9E%E6%94%B6%E7%AE%97%E6%B3%95/">JVM（Java虚拟机）-垃圾回收算法</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/Node/">Node</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/Project/">Project</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/React/">React</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/SVN/">SVN</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/Vue-typescript/">Vue-typescript</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/gitee/">gitee</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/iOS/">iOS</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/js/">js</a><span class="category-list-count">12</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/vue/">vue</a><span class="category-list-count">13</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/web-serve%E9%9D%99%E6%80%81%E8%B5%84%E6%BA%90%E6%9C%8D%E5%8A%A1%E5%99%A8/">web serve静态资源服务器</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/webpack/">webpack</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/%E5%89%8D%E7%AB%AF%E8%87%AA%E5%8A%A8%E5%8C%96/">前端自动化</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/%E5%B0%8F%E7%A8%8B%E5%BA%8F/">小程序</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/%E7%A7%BB%E5%8A%A8%E7%AB%AF/">移动端</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/%E7%BB%8F%E9%AA%8C/">经验</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/%E9%9D%A2%E8%AF%95%E9%A2%98/">面试题</a><span class="category-list-count">4</span></li></ul>
    </div>
  </div>


    
      

    
      
    
      
  <div class="widget">
    <h3 class="widget-title">归档</h3>
    <div class="widget-body">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2024/04/">四月 2024</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2023/11/">十一月 2023</a><span class="archive-list-count">8</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2023/09/">九月 2023</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2022/12/">十二月 2022</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2022/08/">八月 2022</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2022/07/">七月 2022</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2022/06/">六月 2022</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2022/04/">四月 2022</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2022/01/">一月 2022</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2021/12/">十二月 2021</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2021/11/">十一月 2021</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2021/10/">十月 2021</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2021/04/">四月 2021</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2021/03/">三月 2021</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2021/02/">二月 2021</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2021/01/">一月 2021</a><span class="archive-list-count">6</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2020/12/">十二月 2020</a><span class="archive-list-count">15</span></li></ul>
    </div>
  </div>


    
      
  <div class="widget">
    <h3 class="widget-title">最新文章</h3>
    <div class="widget-body">
      <ul class="recent-post-list list-unstyled no-thumbnail">
        
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/blog/categories/HTML-CSS/">HTML + CSS</a>
              </p>
              <p class="item-title">
                <a href="/blog/2024/04/15/%E6%8B%96%E5%8A%A8%E5%92%8C%E7%82%B9%E5%87%BB%E5%BC%B9%E7%AA%97/" class="title">拖动和点击弹窗</a>
              </p>
              <p class="item-date">
                <time datetime="2024-04-15T12:22:06.000Z" itemprop="datePublished">2024-04-15</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/blog/categories/%E9%9D%A2%E8%AF%95%E9%A2%98/">面试题</a>
              </p>
              <p class="item-title">
                <a href="/blog/2023/11/29/html%E9%9D%A2%E8%AF%95%E9%A2%98/" class="title">html面试题</a>
              </p>
              <p class="item-date">
                <time datetime="2023-11-29T15:58:27.000Z" itemprop="datePublished">2023-11-29</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/blog/categories/%E9%9D%A2%E8%AF%95%E9%A2%98/">面试题</a>
              </p>
              <p class="item-title">
                <a href="/blog/2023/11/29/css%E9%9D%A2%E8%AF%95%E9%A2%98/" class="title">css面试题</a>
              </p>
              <p class="item-date">
                <time datetime="2023-11-29T15:57:17.000Z" itemprop="datePublished">2023-11-29</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/blog/categories/%E9%9D%A2%E8%AF%95%E9%A2%98/">面试题</a>
              </p>
              <p class="item-title">
                <a href="/blog/2023/11/29/js%E9%9D%A2%E8%AF%95%E9%A2%98/" class="title">js面试题</a>
              </p>
              <p class="item-date">
                <time datetime="2023-11-29T15:37:30.000Z" itemprop="datePublished">2023-11-29</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/blog/categories/%E9%9D%A2%E8%AF%95%E9%A2%98/">面试题</a>
              </p>
              <p class="item-title">
                <a href="/blog/2023/11/29/%E9%9D%A2%E8%AF%95%E9%A2%98/" class="title">面试题</a>
              </p>
              <p class="item-date">
                <time datetime="2023-11-29T15:29:49.000Z" itemprop="datePublished">2023-11-29</time>
              </p>
            </div>
          </li>
          
      </ul>
    </div>
  </div>
  

    
  </div>
</aside>

  
  
<main class="main" role="main">
  <div class="content">
  <article id="post-工作功能归纳-md" class="article article-type-post" itemscope itemtype="http://schema.org/BlogPosting">
    
    <div class="article-header">
      
        
  
    <h1 class="article-title" itemprop="name">
      工作功能归纳.md
    </h1>
  

      
      <div class="article-meta">
        <span class="article-date">
    <i class="icon icon-calendar-check"></i>
	<a href="/blog/2021/10/23/%E5%B7%A5%E4%BD%9C%E5%8A%9F%E8%83%BD%E5%BD%92%E7%BA%B3-md/" class="article-date">
	  <time datetime="2021-10-23T08:59:17.000Z" itemprop="datePublished">2021-10-23</time>
	</a>
</span>
        
  <span class="article-category">
    <i class="icon icon-folder"></i>
    <a class="article-category-link" href="/blog/categories/Project/">Project</a>
  </span>

        

        

        <span class="post-comment"><i class="icon icon-comment"></i> <a href="/blog/2021/10/23/%E5%B7%A5%E4%BD%9C%E5%8A%9F%E8%83%BD%E5%BD%92%E7%BA%B3-md/#comments" class="article-comment-link">评论</a></span>
        
      </div>
    </div>
    <div class="article-entry marked-body" itemprop="articleBody">
      
        <h2 id="1、vue-项目使用-html2canvas-生成截图并转为-base-64-格式"><a href="#1、vue-项目使用-html2canvas-生成截图并转为-base-64-格式" class="headerlink" title="1、vue 项目使用 html2canvas 生成截图并转为 base 64 格式"></a>1、vue 项目使用 html2canvas 生成截图并转为 base 64 格式</h2><ul>
<li>安装：yarn add htmlcanvas</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div id=<span class="string">&quot;app&quot;</span>&gt;</span><br><span class="line">    &lt;div id=<span class="string">&quot;view&quot;</span> style=<span class="string">&quot;border: 1px solid #ccc; padding: 10px; width: 200px&quot;</span>&gt;</span><br><span class="line">      &lt;img src=<span class="string">&quot;./img/img.jpg&quot;</span> style=<span class="string">&quot;width: 200px; height: 200px&quot;</span> /&gt;</span><br><span class="line">      &lt;p <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;text&quot;</span>&gt;</span><br><span class="line">        NEC畅玩英雄联盟四核笔记本电脑 i5i7四代固态商务办公游戏本分期</span><br><span class="line">      &lt;/p&gt;</span><br><span class="line">      &lt;p style=<span class="string">&quot;color: red&quot;</span>&gt;</span><br><span class="line">        ￥<span class="number">580</span></span><br><span class="line">        &lt;span style=<span class="string">&quot;text-decoration: line-through; color: #ccc&quot;</span>&gt;￥<span class="number">588</span>&lt;/span&gt;</span><br><span class="line">      &lt;/p&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    &lt;img :src=<span class="string">&quot;imgUrl&quot;</span> alt=<span class="string">&quot;&quot;</span> /&gt;</span><br><span class="line">    &lt;input type=<span class="string">&quot;button&quot;</span> value=<span class="string">&quot;截图&quot;</span> @click=<span class="string">&quot;takeScreenshot()&quot;</span> /&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line"><span class="keyword">import</span> html2canvas <span class="keyword">from</span> <span class="string">&quot;html2canvas&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  name: <span class="string">&quot;App&quot;</span>,</span><br><span class="line">  <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      imgUrl: <span class="string">&quot;&quot;</span>,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">  methods: &#123;</span><br><span class="line">    <span class="function"><span class="title">takeScreenshot</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">        <span class="comment">// 需要传入两个参数：第一个：截图的区域  第二个参数：html2canvas 可用参数</span></span><br><span class="line">        <span class="comment">// 可用参数：</span></span><br><span class="line">        <span class="comment">// allowTaint：允许跨域（图片跨域相关），服务器也需要做相应的图片跨域处理</span></span><br><span class="line">        <span class="comment">// backgroundColor：画布背景颜色， 如果 Dom 中没有指定。null</span></span><br><span class="line">        <span class="comment">// canvas：用作基础的现有元素canvas</span></span><br><span class="line">        <span class="comment">// foreignObjectRendering：如果浏览器支持，是否使用外国对象渲染</span></span><br><span class="line">        <span class="comment">// imageTimeout：加载图像的超时（以毫秒为限）。设置为禁用超时。0</span></span><br><span class="line">        <span class="comment">// ignoreElements：从渲染中删除匹配元素的谓词函数</span></span><br><span class="line">        <span class="comment">// logging：启用用于调试的伐木</span></span><br><span class="line">        <span class="comment">// onclone：当文档被克隆用于渲染时，调回函数可用于修改将要呈现的内容，而不会影响原始源文档</span></span><br><span class="line">        <span class="comment">// proxy：将 Url 到用于加载跨源图像的代理。如果空出，则不会加载跨源图像</span></span><br><span class="line">        <span class="comment">// removeContainer：是否清理克隆的 Dom 元素 html2 坎瓦斯会暂时创建</span></span><br><span class="line">        <span class="comment">// scale：用于渲染的刻度。默认浏览器设备像素比率</span></span><br><span class="line">        <span class="comment">// useCORS：是否尝试使用 CORS 从服务器加载图像</span></span><br><span class="line">        <span class="comment">// width：宽度canvas</span></span><br><span class="line">        <span class="comment">// height：高度canvas</span></span><br><span class="line">        <span class="comment">// x：作物画布 x 坐标</span></span><br><span class="line">        <span class="comment">// y：作物画布 y 坐标</span></span><br><span class="line">        <span class="comment">// scrollX：渲染元素时要使用的 x 滚动位置（例如元素是否使用）position: fixed)</span></span><br><span class="line">        <span class="comment">// scrollY：渲染元素时要使用的 y 滚动位置（例如元素是否使用）position: fixed</span></span><br><span class="line">        <span class="comment">// windowWidth：渲染时要使用的窗口宽度，这可能会影响媒体查询等内容Element</span></span><br><span class="line">        <span class="comment">// windowHeight：渲染时要使用的窗口高度，这可能会影响媒体查询等内容Element</span></span><br><span class="line">      html2canvas(<span class="built_in">document</span>.getElementById(<span class="string">&quot;view&quot;</span>), &#123;</span><br><span class="line">        allowTaint: <span class="literal">true</span>,</span><br><span class="line">        <span class="comment">// width: 300,</span></span><br><span class="line">        <span class="comment">// height: 300</span></span><br><span class="line">      &#125;).then(<span class="function">(<span class="params">canvas</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="comment">// 通过 canvas api 将图片转为 base 64 格式</span></span><br><span class="line">        <span class="keyword">const</span> url = canvas.toDataURL(<span class="string">&quot;image/jpg&quot;</span>);</span><br><span class="line">        <span class="built_in">this</span>.imgUrl = url;</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">&lt;style&gt;</span><br><span class="line">.text &#123;</span><br><span class="line">  display: -webkit-box;</span><br><span class="line">  -webkit-box-orient: vertical;</span><br><span class="line">  -webkit-line-clamp: <span class="number">2</span>;</span><br><span class="line">  overflow: hidden;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>


<h2 id="2、文件下载或导出，以下载-Excel-表格为例"><a href="#2、文件下载或导出，以下载-Excel-表格为例" class="headerlink" title="2、文件下载或导出，以下载 Excel 表格为例"></a>2、文件下载或导出，以下载 Excel 表格为例</h2><ul>
<li><p><a style="color: red">注意：使用 a 标签进行下载，必须要设置 download 属性，否则无法下载，并且必须要设置文件的格式，否则默认下载 .txt 文件</a></p>
</li>
<li><p>常见的下载方式是：get 请求下载</p>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> res = axios(&#123;</span><br><span class="line">    method: <span class="string">&#x27;get&#x27;</span>,</span><br><span class="line">    url: <span class="string">&#x27;xxxxxxxxx&#x27;</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">// &#123;code: &#x27;500200&#x27;, data: &#x27;http://xxxxxx/Excel.xlsx&#x27;, success&#125;</span></span><br><span class="line"><span class="comment">// 通过接口可以获取到文件下载的链接</span></span><br><span class="line"><span class="keyword">const</span> url = res.data</span><br><span class="line"><span class="comment">// 通过 href 执行下载</span></span><br><span class="line"><span class="built_in">window</span>.location.href = url  <span class="comment">// 设置该行代码，文件就会被下载</span></span><br><span class="line"><span class="comment">// &lt;a :src=&quot;url&quot; download=&#x27;文件的名字.xlsx&#x27;&gt;&lt;/a&gt;  文件下载的第二种方式，必须要设置文件的格式，否则默认下载 .txt 格式的文件</span></span><br><span class="line"><span class="comment">// 结果：得到一个 Excel.xlsx 的文件</span></span><br></pre></td></tr></table></figure>

<ul>
<li>当参数较多的时候，使用 post 请求下载文件，post 请求一般返回文件流（就是一堆看不懂的乱码）格式的数据</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// post 请求，接口返回的是文件流，前端需要通过 blob 解析，然后动态的创建 a 标签下载文件</span></span><br><span class="line"><span class="keyword">const</span> res = axios(&#123;</span><br><span class="line">    method: <span class="string">&#x27;post&#x27;</span>,</span><br><span class="line">    url: <span class="string">&#x27;xxxxx&#x27;</span>,</span><br><span class="line">    data: params,</span><br><span class="line">    responseType: <span class="string">&#x27;blob&#x27;</span> <span class="comment">// 设置数据的返回类型，一定要写</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">// data 中数据的类型是 Blob，则说明数据的返回类型正确，size：文件的大小，type：接口返回的类型</span></span><br><span class="line"><span class="built_in">console</span>.log(res.data) <span class="comment">// data: Blob &#123;size: 1000, type: &#x27;text/xml&#x27;&#125;</span></span><br><span class="line"><span class="comment">// 创建 blob 对象</span></span><br><span class="line"><span class="comment">// 注意：这里必须传入的数据必须是data: Blob &#123;size: 1000, type: &#x27;text/xml&#x27;&#125;，否则下载的Excel文件中数据是[object, Object] 或者 [object, Promise]</span></span><br><span class="line"><span class="keyword">const</span> blob = <span class="keyword">new</span> Blob([res.data]) </span><br><span class="line"><span class="comment">// 创建下载的链接</span></span><br><span class="line"><span class="keyword">const</span> blobUrl = <span class="built_in">window</span>.URL.createObjectURL(blob)</span><br><span class="line">downLoad(blobUrl)</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">downLoad</span>(<span class="params">url</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">const</span> a = <span class="built_in">document</span>.crerateElement(<span class="string">&#x27;a&#x27;</span>)</span><br><span class="line">    <span class="comment">// 注意：一定要设置download属性，否则点击无法下载</span></span><br><span class="line">    <span class="comment">// 设置下载文件的文件名</span></span><br><span class="line">    a.download = <span class="string">&#x27;文件名.xlsx&#x27;</span></span><br><span class="line">    <span class="comment">// 设置下载链接</span></span><br><span class="line">    a.href = url</span><br><span class="line">    <span class="comment">// 点击下载</span></span><br><span class="line">    a.click()</span><br><span class="line">    <span class="comment">// 自定义事件触发dispatch()：const event = MouseEvent(&#x27;click)  点击下载：a.dispatchEvent(event)</span></span><br><span class="line">    <span class="comment">// 先查看是否具有a这个后代子节点，如果有下载后移除元素</span></span><br><span class="line">    <span class="built_in">document</span>.body.contains(a) &amp;&amp; <span class="built_in">document</span>.boby.removeChild(a)</span><br><span class="line">    <span class="built_in">window</span>.URL.revokeObjectURL(href); <span class="comment">// 释放掉blob对象</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 使用 Ajax 执行 post 请求下载文件</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">request</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">const</span> req = <span class="keyword">new</span> XMLHttpRequest();</span><br><span class="line">    req.open(<span class="string">&#x27;POST&#x27;</span>, <span class="string">&#x27;&lt;接口地址&gt;&#x27;</span>, <span class="literal">true</span>);</span><br><span class="line">    req.responseType = <span class="string">&#x27;blob&#x27;</span>;</span><br><span class="line">    req.setRequestHeader(<span class="string">&#x27;Content-Type&#x27;</span>, <span class="string">&#x27;application/json&#x27;</span>);</span><br><span class="line">    req.onload = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="keyword">const</span> data = req.response;</span><br><span class="line">      <span class="keyword">const</span> a = <span class="built_in">document</span>.createElement(<span class="string">&#x27;a&#x27;</span>);</span><br><span class="line">      <span class="keyword">const</span> blob = <span class="keyword">new</span> Blob([data]);</span><br><span class="line">      <span class="keyword">const</span> blobUrl = <span class="built_in">window</span>.URL.createObjectURL(blob);</span><br><span class="line">      download(blobUrl) ;</span><br><span class="line">    &#125;;</span><br><span class="line">    req.send(<span class="string">&#x27;&lt;请求参数：json字符串&gt;&#x27;</span>);</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 文件下载，但不使用于下载图片</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">download</span>(<span class="params">blobUrl</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> a = <span class="built_in">document</span>.createElement(<span class="string">&#x27;a&#x27;</span>);</span><br><span class="line">  a.style.display = <span class="string">&#x27;none&#x27;</span>;</span><br><span class="line">  <span class="comment">// 必须要设置文件的格式，否则默认下载 .txt 格式的文件</span></span><br><span class="line">  a.download = <span class="string">&#x27;&lt;文件名&gt;.xlsx&#x27;</span>;</span><br><span class="line">  a.href = blobUrl;</span><br><span class="line">  a.click();</span><br><span class="line">  <span class="built_in">document</span>.body.removeChild(a);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="3、文件上传"><a href="#3、文件上传" class="headerlink" title="3、文件上传"></a>3、文件上传</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 自定义文件上传</span></span><br><span class="line">&lt;el-upload</span><br><span class="line">  action=<span class="string">&quot;&quot;</span></span><br><span class="line">  :before-upload=<span class="string">&quot;beforeUpload&quot;</span></span><br><span class="line">  :http-request=<span class="string">&quot;fileRequest&quot;</span></span><br><span class="line">&gt;</span><br><span class="line">  &lt;img v-<span class="keyword">if</span>=<span class="string">&quot;url&quot;</span> :src=<span class="string">&quot;url /&gt;</span></span><br><span class="line"><span class="string">  &lt;div v-else&gt;</span></span><br><span class="line"><span class="string">    &lt;i class=&quot;</span>el-icon-plus<span class="string">&quot;&gt;&lt;/i&gt;</span></span><br><span class="line"><span class="string">    &lt;span&gt;上传&lt;/span&gt;</span></span><br><span class="line"><span class="string">  &lt;/div&gt;</span></span><br><span class="line"><span class="string">&lt;/el-upload&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">fileRequest ()　&#123;</span></span><br><span class="line"><span class="string">  // 使用 FormData() 上传参数</span></span><br><span class="line"><span class="string">  const formData = new FormData()</span></span><br><span class="line"><span class="string">  // 通过 append 添加参数</span></span><br><span class="line"><span class="string">  formData.append(&#x27;参数&#x27;, value)</span></span><br><span class="line"><span class="string">  formData.append(&#x27;文件&#x27;, file)</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  axios(&#123;</span></span><br><span class="line"><span class="string">    url: &#x27;xxxxx&#x27;,</span></span><br><span class="line"><span class="string">    method: &#x27;post&#x27;,</span></span><br><span class="line"><span class="string">    headers: &#123; // 设置请求头信息&#125;,</span></span><br><span class="line"><span class="string">    data: formData</span></span><br><span class="line"><span class="string">  &#125;).then(res =&gt; &#123;</span></span><br><span class="line"><span class="string">    console.log(&#x27;文件上传成功&#x27;, res)</span></span><br><span class="line"><span class="string">  &#125;)</span></span><br><span class="line"><span class="string">&#125;</span></span><br></pre></td></tr></table></figure>


<h2 id="4、将图片链接转为-base-64-格式，将-base-64-格式转为-blob（文件格式流），转为文件格式流的原因是：防止文件过大，导致下载失败，使用场景如：点击按钮下载图片"><a href="#4、将图片链接转为-base-64-格式，将-base-64-格式转为-blob（文件格式流），转为文件格式流的原因是：防止文件过大，导致下载失败，使用场景如：点击按钮下载图片" class="headerlink" title="4、将图片链接转为 base 64 格式，将 base 64 格式转为 blob（文件格式流），转为文件格式流的原因是：防止文件过大，导致下载失败，使用场景如：点击按钮下载图片"></a>4、将图片链接转为 base 64 格式，将 base 64 格式转为 blob（文件格式流），转为文件格式流的原因是：防止文件过大，导致下载失败，使用场景如：点击按钮下载图片</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 将图片链接转为 base 64 格式</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">convertImgToBase64</span>(<span class="params">url</span>)</span>&#123;</span><br><span class="line">    <span class="comment">// 创建 canvas 元素</span></span><br><span class="line">    <span class="keyword">var</span> canvas = <span class="built_in">document</span>.createElement(<span class="string">&#x27;CANVAS&#x27;</span>),</span><br><span class="line">        ctx = canvas.getContext(<span class="string">&#x27;2d&#x27;</span>),</span><br><span class="line">        img = <span class="keyword">new</span> Image;</span><br><span class="line">    <span class="comment">// 必须设置 img 的 src 地址，否则，img.onlad = function ()&#123;&#125; 无法执行</span></span><br><span class="line">    img.src = url    </span><br><span class="line">    <span class="comment">// 异步事件，确保图片完整获取     </span></span><br><span class="line">    img.crossOrigin = <span class="string">&#x27;Anonymous&#x27;</span>;</span><br><span class="line">    img.onload = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">         <span class="comment">// 确保 canvas 的尺寸和图片一样</span></span><br><span class="line">        canvas.height = img.height;</span><br><span class="line">        canvas.width = img.width;</span><br><span class="line">        <span class="comment">// 将图片绘制到 canvas 中, 0,0 代表宽度和高度</span></span><br><span class="line">        ctx.drawImage(img,<span class="number">0</span>,<span class="number">0</span>);</span><br><span class="line">        <span class="comment">// 将图片转为 base 64</span></span><br><span class="line">        <span class="keyword">var</span> dataURL = canvas.toDataURL(<span class="string">&#x27;image/png&#x27;</span>);</span><br><span class="line">        canvas = <span class="literal">null</span>; </span><br><span class="line">    &#125;;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 将 base 64 转为 blob 文件流格式</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">dataURLtoBlob</span>(<span class="params">dataurl</span>) </span>&#123;</span><br><span class="line">	 <span class="keyword">var</span> arr = dataurl.split(<span class="string">&#x27;,&#x27;</span>);</span><br><span class="line">	  <span class="comment">//注意base64的最后面中括号和引号是不转译的   </span></span><br><span class="line">	  <span class="keyword">var</span> _arr = arr[<span class="number">1</span>].substring(<span class="number">0</span>,arr[<span class="number">1</span>].length-<span class="number">2</span>);</span><br><span class="line">	  <span class="keyword">var</span> mime = arr[<span class="number">0</span>].match(<span class="regexp">/:(.*?);/</span>)[<span class="number">1</span>],</span><br><span class="line">	  bstr =atob(_arr),</span><br><span class="line">	  n = bstr.length,</span><br><span class="line">	  u8arr = <span class="keyword">new</span> <span class="built_in">Uint8Array</span>(n);</span><br><span class="line">	  <span class="keyword">while</span> (n--) &#123;</span><br><span class="line">		  u8arr[n] = bstr.charCodeAt(n);</span><br><span class="line">	  &#125;</span><br><span class="line">	  <span class="keyword">return</span> <span class="keyword">new</span> Blob([u8arr], &#123;</span><br><span class="line">		  type: mime</span><br><span class="line">	  &#125;);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">dataURLtoBlob(url) <span class="comment">// Blob &#123;size: 330859, type: &#x27;image/png&#x27;&#125;  </span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 下载图片</span></span><br><span class="line"><span class="keyword">const</span> imgUrl = convertImgToBase64(url)</span><br><span class="line"><span class="keyword">const</span> imgBlob = dataURLtoBlob(imgUrl) </span><br><span class="line"><span class="comment">// 通过a标签的download属性下载图片</span></span><br><span class="line"><span class="keyword">let</span> a = <span class="built_in">document</span>.createElement(<span class="string">&#x27;a&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> event = <span class="keyword">new</span> MouseEvent(<span class="string">&#x27;click&#x27;</span>)</span><br><span class="line"><span class="comment">// 设置下载图片的名字</span></span><br><span class="line">a.download = title</span><br><span class="line"><span class="comment">// 创建下载的链接</span></span><br><span class="line">a.href = URL.createObjectURL(imgBlob)</span><br><span class="line"><span class="comment">// 合成函数，执行下载</span></span><br><span class="line">a.dispatchEvent(event)</span><br></pre></td></tr></table></figure>

<h2 id="5、通过后端返回的链接，下载图片-标题4，是更强大的图片下载方法"><a href="#5、通过后端返回的链接，下载图片-标题4，是更强大的图片下载方法" class="headerlink" title="5、通过后端返回的链接，下载图片(标题4，是更强大的图片下载方法)"></a>5、通过后端返回的链接，下载图片(标题4，是更强大的图片下载方法)</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 图片处理的方法</span></span><br><span class="line"> <span class="number">1</span> <span class="function"><span class="keyword">function</span> <span class="title">downloadByBlob</span>(<span class="params">url,name</span>) </span>&#123;</span><br><span class="line"> <span class="number">2</span>     <span class="keyword">let</span> image = <span class="keyword">new</span> Image()</span><br><span class="line"> <span class="number">3</span>     image.setAttribute(<span class="string">&#x27;crossOrigin&#x27;</span>, <span class="string">&#x27;anonymous&#x27;</span>)</span><br><span class="line"> <span class="number">4</span>     image.src = url</span><br><span class="line"> <span class="number">5</span>     image.onload = <span class="function">() =&gt;</span> &#123;</span><br><span class="line"> <span class="number">6</span>       <span class="keyword">let</span> canvas = <span class="built_in">document</span>.createElement(<span class="string">&#x27;canvas&#x27;</span>)</span><br><span class="line"> <span class="number">7</span>       canvas.width = image.width</span><br><span class="line"> <span class="number">8</span>       canvas.height = image.height</span><br><span class="line"> <span class="number">9</span>       <span class="keyword">let</span> ctx = canvas.getContext(<span class="string">&#x27;2d&#x27;</span>)</span><br><span class="line"><span class="number">10</span>       ctx.drawImage(image, <span class="number">0</span>, <span class="number">0</span>, image.width, image.height)</span><br><span class="line"><span class="number">11</span>       canvas.toBlob(<span class="function">(<span class="params">blob</span>) =&gt;</span> &#123;</span><br><span class="line"><span class="number">12</span>         <span class="keyword">let</span> url = URL.createObjectURL(blob)</span><br><span class="line"><span class="number">13</span>         download(url,name)</span><br><span class="line"><span class="number">14</span>         <span class="comment">// 用完释放URL对象</span></span><br><span class="line"><span class="number">15</span>         URL.revokeObjectURL(url)</span><br><span class="line"><span class="number">16</span>       &#125;)</span><br><span class="line"><span class="number">17</span>     &#125;</span><br><span class="line"><span class="number">18</span>   &#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 执行下载</span></span><br><span class="line"><span class="number">1</span> <span class="function"><span class="keyword">function</span> <span class="title">download</span>(<span class="params">href, name</span>) </span>&#123;</span><br><span class="line"><span class="number">2</span>   <span class="keyword">let</span> eleLink = <span class="built_in">document</span>.createElement(<span class="string">&#x27;a&#x27;</span>)</span><br><span class="line"><span class="number">3</span>   eleLink.download = name</span><br><span class="line"><span class="number">4</span>   eleLink.href = href</span><br><span class="line"><span class="number">5</span>   eleLink.click()</span><br><span class="line"><span class="number">6</span>   eleLink.remove()</span><br><span class="line"><span class="number">7</span> &#125;</span><br></pre></td></tr></table></figure>

<ul>
<li><span style="color: red;font-size: 20px;">总结：文件下载使用标题2的方法，主要是配合a标签使用；下载图片，主要是用标题4，5的方法</span></li>
</ul>
<h2 id="5、多个页面使用的是同一个component-默认情况下当这两个页面切换时并不会触发vue的created或者mounted钩子"><a href="#5、多个页面使用的是同一个component-默认情况下当这两个页面切换时并不会触发vue的created或者mounted钩子" class="headerlink" title="5、多个页面使用的是同一个component,默认情况下当这两个页面切换时并不会触发vue的created或者mounted钩子"></a>5、多个页面使用的是同一个component,默认情况下当这两个页面切换时并不会触发vue的created或者mounted钩子</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// router.js</span></span><br><span class="line"><span class="comment">// 例子：使用同一个 component</span></span><br><span class="line">&#123;<span class="attr">path</span>: <span class="string">&#x27;/a&#x27;</span>, <span class="attr">component</span>: Home&#125;</span><br><span class="line">&#123;<span class="attr">path</span>: <span class="string">&#x27;/b&#x27;</span>, <span class="attr">component</span>: Home&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 解决方法，在 router-view 上增加一个表示 key</span></span><br><span class="line">&lt;router-view :key=<span class="string">&quot;key&quot;</span>&gt;&lt;/router-view&gt;</span><br><span class="line"></span><br><span class="line">computed: &#123;</span><br><span class="line">    <span class="function"><span class="title">key</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="built_in">this</span>.$route.name !== <span class="literal">undefined</span>? <span class="built_in">this</span>.$route.name + +<span class="keyword">new</span> <span class="built_in">Date</span>(): <span class="built_in">this</span>.$route + +<span class="keyword">new</span> <span class="built_in">Date</span>()</span><br><span class="line">    &#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
      
    </div>
    <div class="article-footer">
      <!-- <blockquote class="mt-2x"> -->
  <!-- <ul class="post-copyright list-unstyled">
    
    <li class="post-copyright-link hidden-xs">
      <strong>本文链接：</strong>
      <a href="https://gitee.com/Yu-Luoboke/2021/10/23/%E5%B7%A5%E4%BD%9C%E5%8A%9F%E8%83%BD%E5%BD%92%E7%BA%B3-md/" title="工作功能归纳.md" target="_blank" rel="external">https://gitee.com/Yu-Luoboke/2021/10/23/%E5%B7%A5%E4%BD%9C%E5%8A%9F%E8%83%BD%E5%BD%92%E7%BA%B3-md/</a>
    </li>
    
    <li class="post-copyright-license">
      <strong>版权声明： </strong> 本博客所有文章除特别声明外，均采用 <a href="http://creativecommons.org/licenses/by/4.0/deed.zh" target="_blank" rel="external">CC BY 4.0 CN协议</a> 许可协议。转载请注明出处！
    </li>
  </ul> -->
<!-- </blockquote> -->


<!-- <div class="panel panel-default panel-badger">
  <div class="panel-body">
    <figure class="media">
      <div class="media-left">
        <a href="http://yu-luoboke.gitee.io/blog" target="_blank" class="img-burn thumb-sm visible-lg">
          <img src="/blog/images/avatar.jpg" class="img-rounded w-full" alt="">
        </a>
      </div>
      <div class="media-body">
        <h3 class="media-heading"><a href="http://yu-luoboke.gitee.io/blog" target="_blank"><span class="text-dark">雨落</span><small class="ml-1x">前端开发-奋斗青年</small></a></h3>
        <div>前端经验总结。</div>
      </div>
    </figure>
  </div>
</div> -->


    </div>
  </article>
  
    

  
</div>

  <nav class="bar bar-footer clearfix" data-stick-bottom>
  <div class="bar-inner">
  
  <ul class="pager pull-left">
    
    <li class="prev">
      <a href="/blog/2021/11/10/mock/" title="mock"><i class="icon icon-angle-left" aria-hidden="true"></i><span>&nbsp;&nbsp;上一篇</span></a>
    </li>
    
    
    <li class="next">
      <a href="/blog/2021/04/23/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/" title="前端性能优化"><span>下一篇&nbsp;&nbsp;</span><i class="icon icon-angle-right" aria-hidden="true"></i></a>
    </li>
    
    
  </ul>
  
  
  
  <div class="bar-right">
    
  </div>
  </div>
</nav>
  


</main>

  <footer class="footer" itemscope itemtype="http://schema.org/WPFooter">
	
	
    <ul class="social-links">
    	
        <li><a href="http://yu-luoboke.gitee.io/blog" target="_blank" title="Github" ><i class="icon icon-github"></i></a></li>
        
    </ul>

    <div class="copyright">
    	
        &copy; 2024 lianghongming
        
        <div class="publishby">
        	Theme by <a href="https://gitee.com/Yu-Luoboke/blog" target="_blank"> blog </a>base on <a href="https://gitee.com/Yu-Luoboke/blog" target="_blank">pure</a>.
        </div>
    </div>
</footer>
  <script src="//cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')
</script>

<script src="/blog/js/plugin.min.js"></script>


<script src="/blog/js/application.js"></script>


    <script>
(function (window) {
    var INSIGHT_CONFIG = {
        TRANSLATION: {
            POSTS: '文章',
            PAGES: '页面',
            CATEGORIES: '分类',
            TAGS: '标签',
            UNTITLED: '(未命名)',
        },
        ROOT_URL: '/blog/',
        CONTENT_URL: '/blog/content.json',
    };
    window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>

<script src="/blog/js/insight.js"></script>






   









</body>
</html>